<template>
  <div id="mainDom" ref="mainDom" style="height: 350px; width: 100%"></div>
</template>

<script>
import { chome_MothCost } from "@/apis/clientSide/Home/home";
// import echarts from "echarts";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");

export default {
  mounted() {
    this.getMothCost();
  },
  data() {
    return {
      dateData: [],
    };
  },
  methods: {
    createChart() {
      //   var chartDom = ;
      var myChart = echarts.init(this.$refs.mainDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec",
          ],
        },
        yAxis: {
          name: "单位：万",
          nameLocation: "end",
          type: "value",
          align: "left",
        },
        series: [
          {
            data: this.dateData,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    async getMothCost() {
      this.dateData = [];
      let { code, responseBody } = await chome_MothCost();
      if (code === "200") {
        this.dateData.push(responseBody.jan);
        this.dateData.push(responseBody.feb);
        this.dateData.push(responseBody.mar);
        this.dateData.push(responseBody.apr);
        this.dateData.push(responseBody.may);
        this.dateData.push(responseBody.jun);
        this.dateData.push(responseBody.jul);
        this.dateData.push(responseBody.aug);
        this.dateData.push(responseBody.sept);
        this.dateData.push(responseBody.oct);
        this.dateData.push(responseBody.nov);
        this.dateData.push(responseBody.dec);
        this.createChart();
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>